import * as THREE from '../../../../modules/three/three.module.js'
import dot_vertexGlsl from "../shader/dot_vertex.glsl.js";
import dot_fragmentGlsl from "../shader/dot_fragment.glsl.js";
import {mapCodeToCssColor, WorldConfig} from "../CommonConsts.js";
import HoleMesh from "./HoleMesh.js";
import {areaMtl, bufferAttributeToVectors, createContourLine, getPolygonGeometry} from "../util/StaticMethods.js";
import {vertsToCircles} from "../util/ToolMethods.js";

export function getDotMaterial() {
  const uniforms = {
    // 'lightColor': {value:  new THREE.Vector4(1, 1, 1, 1.0)},
    'darkColor': {value:  new THREE.Vector4(0.1, 0.1, 0.1, 0.8)},
    'repeat': {value: new THREE.Vector2(100, 100 * window.innerHeight / window.innerWidth)},
  }
  const dotMaterial = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: dot_vertexGlsl,
    fragmentShader: dot_fragmentGlsl,
    side: THREE.DoubleSide,
    transparent: true,
    depthTest: false,
  } )
  return dotMaterial
}

const lineColor0 = '#ff6000'
const lineColor1 = '#0a4'
export default class WorkAreaMesh extends HoleMesh {
  /**
   * @type {THREE.Mesh}
   */
  selectionMesh
  /**
   * @type {THREE.Line}
   */
  contour

  constructor(geometry, material) {
    super(geometry, material)
    this.selectionMesh = new THREE.Mesh(geometry, getDotMaterial())
    this.selectionMesh.visible = false
    this.add(this.selectionMesh)
    this.selectionMesh.renderOrder = WorldConfig.order_work_area
    this.renderOrder = WorldConfig.order_work_area
  }
  /**
   * @param {WorkArea} workArea
   */
  setFromVO(workArea) {
    this.vo = workArea
    if (workArea.above) {
      workArea.verts[0].forEach(it => it.z = workArea.above)
    }
    const geometry = getPolygonGeometry(workArea.verts, workArea.planeMat, workArea.facing)
    const material = areaMtl.clone()
    const colorCss = mapCodeToCssColor.get(workArea.colorCode) || '#000000'
    material.color.setStyle(colorCss)
    this.geometry = geometry
    this.material = material
    this.selectionMesh.geometry = geometry
    const circles = vertsToCircles(workArea.verts)
    const pts = circles[0].map(it => {
      const pt = new THREE.Vector3(it.x, it.y, workArea.above || 0)
      return pt.applyMatrix4(workArea.planeMat)
    })
    const contour = createContourLine(pts)
    this.add(contour)
    this.contour = contour
    contour.visible = false
    contour.material.color.setStyle(lineColor0)
    return this
  }

  _selectArea() {
    this.material.colorWrite = false
    this.selectionMesh.visible = true
    const mtlColor = this.material.color
    const color = this.selectionMesh.material.uniforms.darkColor.value
    color.x = mtlColor.r
    color.y = mtlColor.g
    color.z = mtlColor.b
  }

  _unSelectArea() {
    this.material.colorWrite = true
    this.selectionMesh.visible = false
  }
  toggleSelected(selected, isLast) {
    if (this.contour) {
      this.contour.visible = selected
    }
    if (selected) {
      if (this.contour) {
        this.contour.material.color.setStyle(isLast ? lineColor1 : lineColor0)
      }
      this._selectArea()
    } else {
      this._unSelectArea()
    }
  }
  getSelfIntersectPoints() {
    return []
  }
}
